<template>
  <div class="css-box">
    <div class="module-card">
      <div>
        <span class="title">基于格式（开头、结尾）使用不同的样式</span><br />
        <span class="des"
          >为了更容易知道链接的目标，有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标，对不同的资源使用不同的图标或图片。</span
        >
      </div>
      <div class="css-content">
        <a href="http://www.baidu.com">链接</a><br />
        <a href="mailto:">邮件</a><br />
        <a href="a.pdf">PDF</a><br />
        <a href="">normal</a><br />
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">背景渐变动画</span><br />
        <span class="des"
          >CSS中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画。目前，你不能为渐变添加动画，但下面的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。</span
        >
      </div>
      <div class="css-content">
        <button>按钮</button>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">个性圆角</span><br />
        <span class="des"></span>
      </div>
      <div class="css-content">
        <div class="border-radius-special">这里是示例文本。</div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">内部CSS3盒阴影</span><br />
        <span class="des"></span>
      </div>
      <div class="css-content">
        <div class="inset-box-shadow">
          <span>这里是示例文本。</span><br />
          <span>这里是示例文本。</span>
        </div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">只在一边或两边显示盒子阴影</span><br />
        <span class="des"
          >如果你要一个盒阴影，试试这个技巧，能为任一边添加阴影。为了实现这个，首先定义一个有具体宽高的盒子，然后正确定位:after伪类。</span
        >
      </div>
      <div class="css-content">
        <div class="box-shadow"></div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">用CSS动画实现省略号动画</span><br />
        <span class="des"
          >制造一个ellipsis的动画，对于简单的加载状态是很有用的，而不用去使用gif图像。</span
        >
      </div>
      <div class="css-content">
        <div class="loading">加载</div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">制造模糊文本</span><br />
        <span class="des"
          >想要让文本模糊？可以使用color透明和text-shadow实现。</span
        >
      </div>
      <div class="css-content">
        <div class="blurry-text-1">这里是示例文本。</div>
        <div class="blurry-text-2">这里是示例文本。</div>
        <div class="blurry-text-3">这里是示例文本。</div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">跨浏览器的透明</span><br />
        <span class="des">通过filter与opacity进行兼容。</span>
      </div>
      <div class="css-content">
        <div class="transparent-1">这里是示例文本。</div>
        <div class="transparent-2">这里是示例文本。</div>
        <div class="transparent-3">这里是示例文本。</div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">自定义光标选择文本</span><br />
        <span class="des"></span>
      </div>
      <div class="css-content">
        <div class="custom-text-select">这里是示例文本。</div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">有趣的&符号</span><br />
        <span class="des">通过字体改变&的显示样式。</span>
      </div>
      <div class="css-content">
        <div class="amp">这里是示例文本__ &&& __123。</div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">大字段落</span><br />
        <span class="des">改变段落首字的大小及整体段落的排版。</span>
      </div>
      <div class="css-content">
        <div class="large-print-p">
          这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本。
        </div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">CSS3输入框的边框高亮</span><br />
        <span class="des">focus输入框时，输入框边框呈高亮色。</span>
      </div>
      <div class="css-content">
        <input type="text" class="heighlighted-input" /><br />
        <textarea class="heighlighted-textarea" />
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">纯CSS背景噪音</span><br />
        <span class="des"></span>
      </div>
      <div class="css-content">
        <div class="background-noise"></div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">禁止选择内容</span><br />
        <span class="des"></span>
      </div>
      <div class="css-content">
        <div class="select-disable">
          这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本。
        </div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">六边形图案</span><br />
        <span class="des"></span>
      </div>
      <div class="css-content">
        <div class="dot-pattern"></div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">方格图案</span><br />
        <span class="des"></span>
      </div>
      <div class="css-content">
        <div class="checkered-pattern"></div>
      </div>
    </div>

    <div class="module-card">
      <div>
        <span class="title">带CSS3特色的页签</span><br />
        <span class="des"></span>
      </div>
      <div class="css-content">
        <div class="">
          <div class="featureBanner">这里是页签</div>
          这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本，这里是示例文本。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {};
  },
  created() {
    this.initDataFun(); // 初始化数据
  },
  mounted() {},
  beforeDestroy() {},
  computed: {},
  watch: {},
  methods: {
    // 初始化数据
    initDataFun() {},
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.css-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}
.module-card {
  width: calc(31% - 24px);
  background-color: #fff;
  padding-bottom: 60px;
  .title {
  }
  .des {
    font-size: 16px;
  }
  .css-content {
    margin-top: 20px;
    font-size: 16px;
    position: relative;
  }
}

/**CSS3全屏背景 */
.css-box {
  background: url("~@/assets/images/image.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/**网页顶部盒阴影 */
.css-box:before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  -webkit-box-shadow: 0 0 10px rgba(207, 117, 33, 0.8);
  -moz-box-shadow: 0 0 10px rgba(207, 117, 33, 0.8);
  box-shadow: 0 0 10px rgba(207, 117, 33, 0.8);
  z-index: 100;
}

/**基于格式 */
a[href^="http://"]
{
  padding-right: 40px;
  background: url("~@/assets/images/home/logo.png") no-repeat center right;
  background-size: 25px;
}
a[href^="mailto:"] {
  padding-right: 40px;
  background: url("~@/assets/images/scale.png") no-repeat center right;
  background-size: 25px;
}
a[href$=".pdf"] {
  padding-right: 40px;
  background: url("~@/assets/images/home/logo.png") no-repeat center right;
  background-size: 25px;
}

/**背景渐变动画 */
button {
  border: 1px solid grey;
  border-radius: 5px;
  padding: 2px 8px;
  background-image: linear-gradient(#f00, #fff);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;
}
button:hover {
  background-position: 0 0;
}

/**个性圆角 */
.border-radius-special {
  width: 100px;
  border: 1px solid #ff8020;
  -webkit-border-radius: 4px 3px 6px 10px;
  -moz-border-radius: 4px 3px 6px 10px;
  -o-border-radius: 4px 3px 6px 10px;
  border-radius: 4px 3px 6px 10px;
}

/**内部CSS3盒阴影 */
.inset-box-shadow {
  -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16);
}

/**只在一边或两边显示盒子阴影 */
.box-shadow {
  background-color: #ff8020;
  width: 160px;
  height: 90px;
  position: relative;
  margin-bottom: 8px; // 这个间隙很需要，保证阴影不会被后面的元素遮挡
}
.box-shadow:after {
  content: "";
  width: calc(100% - 10px);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 5px;
  z-index: -1;
  -webkit-box-shadow: 0 0 8px 2px #000000;
  -moz-box-shadow: 0 0 8px 2px #000000;
  box-shadow: 0 0 8px 2px #000000;
}

/**用CSS动画实现省略号动画 */
.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis 2s infinite;
  -webkit-animation: ellipsis 2s infinite;
  -moz-animation: ellipsis 2s infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}
@-moz-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}
@-moz-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}

/**制造模糊文本 */
.blurry-text-1 {
  color: transparent;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}
.blurry-text-2 {
  color: transparent;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}
.blurry-text-3 {
  color: transparent;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}

/**跨浏览器的透明 */
.transparent-1 {
  filter: alpha(opacity=70); /* internet explorer */
  -khtml-opacity: 0.7; /* khtml, old safari */
  -moz-opacity: 0.7; /* mozilla, netscape */
  opacity: 0.7; /* fx, safari, opera */
}
.transparent-2 {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5; /* khtml, old safari */
  -moz-opacity: 0.5; /* mozilla, netscape */
  opacity: 0.5; /* fx, safari, opera */
}
.transparent-3 {
  filter: alpha(opacity=30); /* internet explorer */
  -khtml-opacity: 0.3; /* khtml, old safari */
  -moz-opacity: 0.3; /* mozilla, netscape */
  opacity: 0.3; /* fx, safari, opera */
}

/**自定义光标选择文本 */
.custom-text-select::selection {
  background: #6adf6a;
}
.custom-text-select::-moz-selection {
  background: #6adf6a;
}
.custom-text-select::-webkit-selection {
  background: #6adf6a;
}

/**有趣的&符号 */
.amp {
  font-family: Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", serif;
  font-style: italic;
  font-weight: normal;
}

/**大字段落 */
.large-print-p:first-letter {
  display: block;
  margin: 5px 0 0 5px;
  float: left;
  color: #ff3366;
  font-size: 2em;
  font-family: Georgia, Times New Roman, serif;
}

/**CSS3输入框的边框高亮 */
input.heighlighted-input[type="text"],
textarea.heighlighted-textarea {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  outline: none;
  padding: 3px 0 3px 3px;
  margin: 5px 1px 3px 0;
  border: 1px solid #ddd;
}

input.heighlighted-input[type="text"]:focus,
textarea.heighlighted-textarea:focus {
  box-shadow: 0 0 5px orange;
  padding: 3px 0 3px 3px;
  margin: 5px 1px 3px 0;
  border: 1px solid orange;
}

/**纯CSS背景噪音 */
.background-noise {
  width: 200px;
  height: 200px;

  background-image: url();
  background-color: orange;
}

/**禁止选择内容 */
.select-disable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/**六边形图案 */
.dot-pattern {
  width: 400px;
  height: 200px;
  border: 1px solid red;

  background: radial-gradient(circle, white 10%, transparent 10%),
    radial-gradient(circle, white 10%, black 10%) 50px 50px;
  background-size: 100px 100px;
}

/**方格图案 */
.checkered-pattern {
  width: 400px;
  height: 200px;
  border: 1px solid red;

  background-color: white;
  background-image: linear-gradient(
      45deg,
      black 25%,
      transparent 25%,
      transparent 75%,
      black 75%,
      black
    ),
    linear-gradient(
      45deg,
      black 25%,
      transparent 25%,
      transparent 75%,
      black 75%,
      black
    );
  background-size: 100px 100px;
  background-position: 0 0, 50px 50px;
}

/**带CSS3特色的页签 */
.featureBanner {
  // 没有定位的话，自己设置css样式来决定宽度
  position: absolute;
  top: 5px;
  left: -8px;

  padding-right: 10px;
  color: #232323;
  font-weight: bold;
  height: 0;
  border: 15px solid orange;
  border-right-color: transparent;
  line-height: 0;
  box-shadow: 0 5px 5px -5px #000;
  z-index: 1;
}
</style>
